<template>
    <div class="latestPage flex_column">
        <template v-if="userPackageInfo.level===0">
            <div class="flex_center align_center flex_column" style="width: 100%; height: 100%;">
                <img src="../../assets//lock.png" style="width: 150px; height: 150px;">
                <p style="padding-top: 15px; font-weight: 600;">升级套餐，即可解锁此功能体验</p>
                <div class="text_center margin20" style="width: 180px; height: 36px; background: #0147fd; border-radius: 4px; color: #fff; line-height: 36px; cursor: pointer;" @click="serviceDialog=true">联系客服，升级套餐</div>
            </div>
        </template>
        <template v-else>
            <div class="flex_between">
                <div class="selectVue flex">
                    <el-select v-model="currentWeChat.currentUserWechatName" placeholder="选择微信AI客服" style="width: 200px;" @change="weChatChange">
                        <el-option v-for="item in weChatList" :key="item.id" :label="item.wechatName" :value="item"></el-option>
                    </el-select>
                    <el-select v-model="categoryName" placeholder="选择分组" style="width: 200px; margin-left: 10px;" @change="categoryChange" clearable>
                        <el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item"></el-option>
                    </el-select>
                    <el-select v-model="tag" placeholder="选择标签" style="width: 200px; margin-left: 10px;" @change="tagChange" clearable>
                        <el-option v-for="item in tagList" :key="item" :label="item" :value="item"></el-option>
                    </el-select>
                    <el-input v-model="key" placeholder="搜索私聊好友" style="margin-left: 10px; width: 200px;" :clearable="true" @input="searchFun"></el-input>
                </div>
            </div>
            
            <div class="latestContent">
                <div class="thVue flex">
                    <div class="li flex_center align_center" style="width: 160px; line-height: 40px; font-weight: 600;">微信名</div>
                    <div class="li flex_center align_center" style="width: 160px; line-height: 40px; font-weight: 600;">备注</div>
                    <div class="li flex_center align_center" style="width: 140px; line-height: 40px; font-weight: 600;">手机号</div>
                    <div class="li flex_center align_center" style="flex: 1; line-height: 40px; font-weight: 600;">标签</div>
                    <div class="li flex_center align_center" style="flex: 1; line-height: 40px; font-weight: 600;">AI总结</div>
                    <div class="li flex_center align_center" style="width: 120px; line-height: 40px; font-weight: 600;">分组</div>
                    <div class="li flex_center align_center" style="width: 160px; line-height: 40px; font-weight: 600;">操作</div>
                </div>
                <div class="tdContent">
                    <div class="tdVue flex" v-for="(item, index) in list" :key="index">
                        <div class="li text_center line-1" style="width: 160px; line-height: 50px; font-size: 13px;" :title="item.friendWechatName">{{ item.friendWechatName }}</div>
                        <div class="li line-1" style="width: 160px; line-height: 50px; text-align: center; font-size: 13px; padding: 0 10px;" :title="item.friendWechatRemark">{{ item.friendWechatRemark }}</div>
                        <div class="li line-1" style="width: 140px; line-height: 50px; text-align: center; font-size: 13px; padding: 0 10px;">{{ item.remarkPhone || "-" }}</div> 
                        <div class="li text_center line-1" style="flex: 1; line-height: 50px; text-align: center; font-size: 13px; padding: 0 10px;" :title="item.tag">{{ item.tag || "-" }}</div>
                        <div class="li text_center line-1"  style="flex: 1; line-height: 50px; text-align: center; font-size: 13px; padding: 0 10px;" :title="item.summary">{{ item.summary || "-" }}</div>
                        <div class="li text_center" style="width: 120px; line-height: 50px; font-size: 13px;">{{ item.categoryName || "-"}}</div>
                        <div class="li flex_center align_center" style="width: 160px;">
                            <div class="btnVue" @click="handleEdit(item.id)">管理</div>
                            <div class="btnVue" @click="handleToChat(item)">查看聊天</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="paginationVue flex_center align_center">
                <el-pagination background layout="total, prev, pager, next" :page-size="pageSize" :total="total" @current-change="handleCurrentChange"></el-pagination>
            </div>

        </template>
        
        <serviceVue :dialogTableVisible10="serviceDialog" @beforeClose="serviceDialog=false"></serviceVue>
        <!-- 编辑 -->
        <editVue :dialogTableVisible="dialogTableVisible" ref="editChild" @beforeClose="dialogTableVisible=false" @callback="getList"></editVue>
        
    </div>
</template>

<script>
import { mapState } from "vuex"
import { formatTime } from "@/common/tools.js"
import editVue from "./components/edit.vue"
import serviceVue from '@/components/service.vue';
export default {
    components: {
        editVue,
        serviceVue
    },
    data(){
        return {
            key: "",
            list: [],
            total: 0,
            pageNum: 1,
            pageSize: 15,
            categoryName: "",
            categoryId: "",
            categoryList: [],
            tag: "",
            isEmpty: false,
            dialogTableVisible: false,
            serviceDialog: false,
            tagList: ["高意向","中意向","低意向","了解产品详情", "询问价格", "询问使用方法", "询问发货时间", "询问售后服务", "非常满意", "满意", "一般", "不满意", "非常不满意", "产品质量", "发货时间", "售后服务", "使用问题", "价格问题", "新客户", "忠实客户", "活跃", "潜在", "流失"],
            loading: false,
            id: ""
        }
    },
    created(){
        this.getCategoryList()
    },
    mounted(){
        setTimeout(() => {
            this.getList()
        }, 1000);
    },
    computed: {
        ...mapState({
            currentWeChat: state=> state.currentWeChat,
            weChatList: state=> state.weChatList,
            userPackageInfo: state=> state.userPackageInfo
        })
    },
    watch: {
        key(){
            if(!this.key) {
                this.pageNum = 1
                this.getList()
            }
        }
    },
    methods: {  
        // 分组筛选  
        categoryChange(e){
            console.log(e)
            this.categoryId = e.id
            this.categoryName = e.name
            this.pageNum = 1
            this.getList()
        },

        // 标签筛选
        tagChange(e){
            this.tag = e
            this.pageNum = 1
            this.getList()
        },

        // 微信筛选
        weChatChange(e){
            if(this.currentWeChat.currentWeChatId===e.id) return
            let obj = this.currentWeChat
            obj.currentWeChatId = e.id
            obj.currentUserWechatName = e.wechatName
            obj.currentOnLineStatus = e.status
            this.$store.state.currentWeChat = obj
            this.pageNum = 1
            window.sessionStorage.setItem("currentWeChatId", e.id)
            window.sessionStorage.setItem("currentUserWechatName", e.wechatName)
            window.sessionStorage.setItem("currentOnLineStatus", e.status)
            setTimeout(() => {
                this.getList()
            }, 200);
        },

        formatTimeFun(value){
            if(!value) return
            return formatTime(value*1000, "YMDHMS")
        },
        
        // 获取跟进列表
        getList(){
            this.$post("/front/wechat/friend/friendList", {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                userWechatPrimaryId: this.currentWeChat.currentWeChatId,
                content: this.key,
                categoryId: this.categoryId || "",
                tag: this.tag,
                userWechatName: this.currentWeChat.currentUserWechatName,
                type: 0,
            }).then(res=>{
                if(res.data.code===0) {
                    this.list = res.data.obj.list
                    this.total = res.data.obj.total
                }
            })
        },

        // 搜索关键字
        searchFun(){
            if(!this.key) return
            this.pageNum = 1
            this.getList()
        },

        // 打开编辑弹框
        handleEdit(id){
            this.dialogTableVisible = true
            this.$refs.editChild.getFriendDetail(id)
            this.$refs.editChild.getCategoryList()
        },

        // 查看聊天
        handleToChat(item){
            this.$store.state.currentChat = item
            this.$parent.defaultActive = "chatting"
            this.$store.state.history = []
            this.$router.push({name: "chatting", query: {
                key: item.type=== 0 ? item.friendWechatName : item.groupName,
            }})
        },

        // 翻页
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pageNum = val
            this.getList()
        },

        // 获取分组列表
        getCategoryList(){
            this.$post("/front/wechat/friend/categoryList").then(res=>{
                if(res.data.code===0) {
                    this.categoryList = res.data.obj
                }
            })
        },
    }
}
</script>

<style lang="less" scoped>
:deep(.el-icon-circle-close) {
    font-size: 18px !important;
    color: #409EFF !important;
}
.latestPage {
    width: 100%;
    height: 100%;
    padding: 15px 15px 0;
    .selectVue {
        width: 100%;
        height: 40px;
        .btn {
            width: 80px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            border-radius: 5px;
            background: #0147fd;
            color: #fff;
            margin-left: 10px;
            cursor: pointer;
        }
    }
    .btnVue {
        width: 100px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        border-radius: 5px;
        background: #0147fd;
        color: #fff;
        margin-left: 10px;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
    }
    .latestContent {
        width: 100%;
        height: calc(100% - 100px);
        margin-top: 10px;
        .thVue {
            width: 100%;
            height: 40px;
            background: #f5f5f5;
        }
        .tdContent {
            width: 100%;
            height: calc(100% - 40px);
            overflow: scroll;
            .tdVue {
                width: 100%;
                height: 50px;
                border-bottom: 1px solid #f5f5f5;
                .btnVue {
                    width: 66px;
                    height: 28px;
                    line-height: 28px;
                    text-align: center;
                    font-size: 12px;
                    color: #fff;
                    border-radius: 4px;
                    font-weight: 400;
                    cursor: pointer;
                    margin: 0 2px;
                }
                .btnVue:nth-child(1) {
                    background: #0147fd;
                }
                .btnVue:nth-child(2) {
                    background: #67C23A;
                }
            }
            .tdVue:hover {
                background: #f5f5f5;
            }
        }
        .tdContent::-webkit-scrollbar {
            width: 0;
            height: 0;
        }
    }
    .paginationVue {
        width: 100%;
        height: 50px;
    }
}    

</style>